<template>
    <transition name='slide'>
        <div id="bindPhone">
            <navbar :title="title"></navbar>
            <div class="placeholder"></div>
            <div class="form">
                <div class="form-item">
                    <span class="label">
                        <i class="icon icon-phone"></i>
                        手机号
                    </span>
                    <input type="text" name="phonenumber" placeholder="请输入11位手机号" v-model="phonenumber" autocomplete="off">
                </div>
                <div class="form-item">
                    <span class="label">
                        <i class="icon icon-code"></i>
                        验证码
                    </span>
                    <input type='text' class="phoneCode" name="phoneCode" placeholder="请输入验证码" v-model="phoneCode" autocomplete="off">
                    <div class="getCodeBtn">
                        <button @click="sendCode" v-text="btnTxt" :disabled=btnStatus></button>
                    </div>
                </div>
                <div class="button">
                    <button @click="loginSubmit">确定</button>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
    import navbar from 'common/navbar'
    import { Toast } from 'vant'
    import {bindPhone,sendCode,checkphone} from 'api/login'
    import { mapState,mapMutations} from 'vuex'
    export default {
        data(){
            return{
                title:'绑定手机',
                btnTxt:'获取验证码',
                btnStatus:false,
                phonenumber:'',
                phoneCode:''
            }
        },
        methods:{
            sendCode(){
                let phonereg=/^[1][3,4,5,6,7,8][0-9]{9}$/;
                if(this.phonenumber.length==0){
                    Toast('请输入手机号');
                    return;
                }else if(!phonereg.test(this.phonenumber)){
                    Toast('请输入正确的手机号');
                    return false;
                }else{
                    let _this=this;
                    new Promise(_this.sendCodeStep1).then(function(val){
                        return new Promise(_this.sendCodeStep2);
                    }).then(function(val){
                        return val;
                    }).catch(function(error) {
                        console.log('error: ' + error);
                    });
                }
            },
            sendCodeStep1(resolve,reject){
                checkphone(this.phonenumber,2).then(res=>{
                    if(res.data.error==0){
                        resolve("检测完成")
                    }else{
                        reject("检测失败")
                    }
                })
            },
            sendCodeStep2(resolve,reject){
                sendCode(this.phonenumber).then(res=>{
                    if(res.data.error==0){
                        resolve("发送成功")
                        Toast("已成功发送");
                        let time=60;
                        let codeTimer=setInterval(()=>{
                            this.btnStatus=true;
                            time--;
                            if(time<=0){
                                this.btnStatus=false;
                                this.btnTxt='重新获取';
                                clearInterval(codeTimer);
                            }else{
                                this.btnTxt=`${time}s`;
                            }
                        },1000)
                    }else{
                        reject("发送失败")
                    }
                });
            },
            loginSubmit(){
                let phonereg=/^[1][3,4,5,6,7,8][0-9]{9}$/;
                if(this.phonenumber.length==0){
                    Toast("请输入手机号");
                    return;
                }else if(!phonereg.test(this.phonenumber)){
                    Toast('请输入正确的手机号');
                    return false;
                }else if(this.phoneCode.length==0){
                    Toast("请输入验证码");
                    return;
                }else{
                    bindPhone(this.phonenumber,this.phoneCode,1).then(res=>{
                         if(res.data.error==0){
                             Toast("绑定成功");
                             this.userInfo.phone=this.phonenumber;
                             this.$router.replace({
                                path: '/userMsg'
                            });
                         }
                    })
                }
            },
            ...mapMutations(['SET_USERINFO'])
        },
        computed:{
            ...mapState(['userInfo'])
        },
        components:{
            navbar
        },
        destroyed(){
            Toast.clear();
        }
    }
</script>

<style scoped lang="scss">
@import '~styles/variable.scss';
@import '~styles/mixins.scss';
.slide-enter-active, .slide-leave-active{
    transition: all 0.3s;
}
.slide-enter, .slide-leave-to{
    transform: translate3d(100%, 0, 0);
}
.placeholder{
    width:100%;
    height:0.8rem;
}
#bindPhone{
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
}
.form{
    margin-top:0.72rem;
    .form-item{
        position:relative;
        margin: 0.3rem auto 0;
        padding:0 0.2rem 0 1.7rem;
        width: 6.64rem;
        height: 0.9rem;
        line-height: 0.9rem;
        border: 1px solid #cbcbcb;
        border-radius: 10px; 
        &:last-child{
            margin:0 auto;
        }
        input{
            width:100%;
            height:100%;
            line-height:100%;
            padding-left:0.12rem;
            border:none;
            box-sizing: border-box;
            font-size:0.28rem;
            background: transparent;
        }
        .phoneCode{
            width:2.6rem;
        }
        .label{
            position:absolute;
            top:50%;
            transform: translateY(-50%);
            left:0.3rem;
            font-size:$font-size-m;
            color:$color-text;
            .icon{
                display:inline-block;
                margin-right:0.1rem;
                background-size:100% 100%;
                background-repeat: no-repeat;
                vertical-align: top;
                &.icon-phone{
                width:0.3rem;
                height:0.48rem;
                margin-top:0.21rem;
                @include bg-image('../../assets/image/icon_phone');
                }
                &.icon-code{
                width:0.36rem;
                height:0.45rem;
                margin-top:0.22rem;
                @include bg-image('../../assets/image/icon_yzm');
                }
            }
        }
        .getCodeBtn{
            position:absolute;
            top:50%;
            right:0.18rem;
            transform:translateY(-50%);
            button{
                width:1.6rem;
                height:0.5rem;
                line-height:0.5rem;
                font-size:0.24rem;
                color:#fff;
                background:$color-focus;
                border:none;
                border-radius:0.25rem;
                &:disabled{
                    background:#ddd;
                    color:#f9f9f9;
                }
            }
        }
    }
        .button{
            width:6.6rem;
            margin:0.8rem auto 0 auto;
        button{
            @include login-btn();
        }
    }
}
</style>